<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="FormData" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
			<el-form-item label="地区名称" prop="name">
				<el-input v-model="FormData.name" placeholder="请输入地区名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="上级" prop="parent">
				<el-cascader v-model="FormData.parent" :options="menuOptions" :props="menuProps"
					:show-all-levels="true" placeholder="顶级" clearable></el-cascader>
			</el-form-item>
			<el-form-item label="排序" prop="sortNumber">
				<el-input-number v-model="FormData.sortNumber" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
			</el-form-item>
			<!-- <el-form-item label="是否有效" prop="status">
				<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="form.remark" clearable type="textarea"></el-input>
			</el-form-item> -->
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
	<!-- <el-row :gutter="40">
		<template v-if="visible">
			<el-col :lg="12">
				<h2>{{FormData.id?"编辑":"新增"}}</h2>
				<el-form :model="FormData" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
					<el-form-item label="地区名称" prop="name">
						<el-input v-model="FormData.name" clearable placeholder="请输入地区名称"></el-input>
					</el-form-item>
					<el-form-item label="上级" prop="parent">
						<el-cascader v-model="FormData.parent" :options="menuOptions" :props="menuProps"
							:show-all-levels="true" placeholder="顶级" clearable></el-cascader>
					</el-form-item>
					<el-form-item label="排序" prop="">
						<el-input-number v-model="FormData.sortNumber" controls-position="right" />
						<span class="u-m-l-5">越小越在前面</span>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submit" :loading="loading">保 存</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</template>
	</el-row> -->

</template>

<script>
	export default {
		data() {
			return {
				mode: "add",
				visible:false,
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				FormData: {
					name: "",
					parent: null,
					sortNumber: 0,
				},
				menuOptions: [],
				menuProps: {
					value: 'id',
					label: 'title',
					checkStrictly: true
				},
				//验证规则
				rules: {
					name: [{
						required: true,
						message: '请输入地区名称'
					}],
					parent: [{
						required: true,
						message: '请选择上级'
					}]
				},
				isSaveing: false,
				menuList:[]
			}
		},
		watch: {
			menuList: {
				handler() {
					this.menuOptions = this.treeToMap(this.menuList)
					this.menuOptions.unshift({
						id: null,
						title: '顶级',
						value: null
					})
					console.log(11,this.menuOptions,11)
				},
				deep: true
			}
		},
		mounted() {
			this.getMenu()
		},
		methods: {
			//加载树数据
			async getMenu() {
				var res = await this.$API.system.area.tree.post()
				this.menuList = res.data
			},
			//显示
			open(mode = 'add') {
				this.mode = mode;
				this.visible = true;
				return this
			},
			//简单化菜单
			treeToMap(tree) {
				const map = []
				tree.forEach(item => {
					var obj = {
						id: item.id,
						parentId: item.parentId,
						title: item.name,
						children: item.children && item.children.length > 0 ? this.treeToMap(item.children) :
							null
					}
					map.push(obj)
				})
				return map
			},
			//保存
			async submit() {
				var valid = await this.$refs.dialogForm.validate().catch(() => {})
				if (!valid) {
					return false
				}
				this.isSaveing = true;
				let parent = null
				if (this.FormData.parent.length) {
					parent = this.FormData.parent[this.FormData.parent.length - 1]
				} else {
					parent = null
				}
				let data = {
					name: this.FormData.name,
					parent: parent,
					sortNumber: this.FormData.sortNumber
				}
				if (this.FormData.id) {
					data.id = this.FormData.id
				}
				var res = await this.$API.system.area.add.post(data);
				this.isSaveing = false;
				if (res.code == 200) {
					this.mode = null
					this.$emit('success', this.FormData, this.mode)
					this.FormData = {}
					this.visible = false;
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			//表单注入数据
			setData(data) {
				Object.assign(this.FormData, data)
				// if (data.parent) {
				// 	this.FormData.parent = pid
				// } else {
				// 	this.FormData.parent = 0
				// }
			}
		}
	}
</script>

<style scoped>
	h2 {
		font-size: 17px;
		color: #3c4a54;
		padding: 0 0 30px 0;
	}

	.apilist {
		border-left: 1px solid #eee;
	}

	[data-theme="dark"] h2 {
		color: #fff;
	}

	[data-theme="dark"] .apilist {
		border-color: #434343;
	}
</style>
